<%@ include file="../common/IncludeTop.jsp"%>

<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function () {
		//为所有的-按钮绑定单击事件
		$('.minus').each(function () {
			$(this).on('click',function () {
				var quantity = this.nextSibling;

				var listPrice = this.parentNode.nextSibling.nextSibling;
				var totalPrice = listPrice.nextSibling.nextSibling;

				var itemRow = this.parentNode.parentNode;
				var itemId = $(itemRow).attr('id');

				if(quantity.value > 1) {
					//修改商品数量和总价
					quantity.value--;
					totalPrice.firstChild.textContent = '$' + ($(listPrice).attr('id') * quantity.value).toFixed(2);
					//发送ajax请求
					$.get('service','action=ajaxUpdateQuantity&itemId=' + itemId + '&quantity=' + quantity.value,function (data){});
				}
				else if(quantity.value == 1){
					//移除商品
					$(itemRow).remove();
					var tableHeader = $('#tableHeader');
					var cartTable = tableHeader.parent();
					if(cartTable.find('tr').length == 2){
						console.log(123);
						tableHeader.after("<tr><td colspan='8'><b>Your cart is empty.</b></td></tr>");
					}
					//发送ajax请求
					$.get('service','action=ajaxRemoveItem&itemId=' + itemId,function (data){});
				}
			});
		});

		//为所有的+按钮绑定单击事件
		$('.add').each(function (){
			$(this).on('click',function () {
				var quantity = this.previousSibling;
				var listPrice = this.parentNode.nextSibling.nextSibling;
				var totalPrice = listPrice.nextSibling.nextSibling;
				var itemRow = this.parentNode.parentNode;
				var itemId = $(itemRow).attr('id');

				//修改商品数量和总价
				quantity.value++;
				totalPrice.firstChild.textContent = '$' + ($(listPrice).attr('id') * quantity.value).toFixed(2);

				//发送ajax请求
				$.get('service','action=ajaxUpdateQuantity&itemId=' + itemId + '&quantity=' + quantity.value,function (data){});
			});
		});

		//为所有的remove按钮绑定单击事件
		$('.remove').each(function () {
			$(this).on('click',function () {
				var itemRow = this.parentNode.parentNode;
				var itemId = $(itemRow).attr('id');
				//移除商品
				$(itemRow).remove();
				var tableHeader = $('#tableHeader');
				var cartTable = tableHeader.parent();
				if(cartTable.find('tr').length == 2){
					tableHeader.after("<tr><td colspan='8'><b>Your cart is empty.</b></td></tr>");
				}
				//发送ajax请求
				$.get('service','action=ajaxRemoveItem&itemId=' + itemId,function (data){});
			});
		});

		//为所有的quantity文本框绑定失去焦点事件
		$('.quantity').each(function () {
			$(this).on('blur',function () {
				var listPrice = this.parentNode.nextSibling.nextSibling;
				var totalPrice = listPrice.nextSibling.nextSibling;
				var itemRow = this.parentNode.parentNode;
				var itemId = $(itemRow).attr('id');
				if(this.value > 0) {
					//修改总价
					totalPrice.firstChild.textContent = '$' + ($(listPrice).attr('id') * this.value).toFixed(2);
					//发送ajax请求
					$.get('service','action=ajaxUpdateQuantity&itemId=' + itemId + '&quantity=' + this.value,function (data){});
				}
				else{
					//移除商品
					$(itemRow).remove();
					//移除商品
					$(itemRow).remove();
					var tableHeader = $('#tableHeader');
					var cartTable = tableHeader.parent();
					if(cartTable.find('tr').length == 2){
						tableHeader.after("<tr><td colspan='8'><b>Your cart is empty.</b></td></tr>");
					}
					//发送ajax请求
					$.get('service','action=ajaxRemoveItem&itemId=' + itemId,function (data){});
				}
			});
		});
	});
</script>

<div id="BackLink">
	<a href="browse?action=viewMain">Return to Main Menu</a>
</div>

<div id="Catalog">

<div id="Cart">

<h2>Shopping Cart</h2>


	<form name="cart" action="service?action=updateCart" method="post">
		<table id="cartTable">
			<tr id="tableHeader">
				<th><b>Item ID</b></th>
				<th><b>Product ID</b></th>
				<th><b>Description</b></th>
				<th><b>In Stock?</b></th>
				<th><b>Quantity</b></th>
				<th><b>List Price</b></th>
				<th><b>Total Cost</b></th>
				<th>&nbsp;</th>
			</tr>

			<c:if test="${sessionScope.cart.numberOfItems == 0}">
				<tr>
					<td colspan="8"><b>Your cart is empty.</b></td>
				</tr>
			</c:if>

			<c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
			<tr id="${cartItem.itemId}">
				<td>
					<a href="viewItem?itemId=${cartItem.itemId}">${cartItem.itemId}</a>
				</td>
				<td>
					${cartItem.productId}
				</td>
				<td>
						${cartItem.descn}
				</td>
				<td>
						${cartItem.inStock}
				</td>
				<td style="width: 120px">
					<input type="button" class="minus" value="-" style="width: 24px"><input type="text" class="quantity" name="${cartItem.quantity}" value="${cartItem.quantity}" style="width: 64px;text-align: center" oninput="value=value.replace(/[^\d]/g,'')"/><input type="button" class="add" value="+" style="width: 24px">
				</td>
				<td id="${cartItem.listPrice}">
					<fmt:formatNumber value="${cartItem.listPrice}" pattern="$#,##0.00" />
				</td>
				<td>
					<fmt:formatNumber value="${cartItem.totalPrice}" pattern="$#,##0.00" />
				</td>
				<td>
					<input type="button" class="remove" value="Remove">
				</td>
			</tr>
			</c:forEach>

			<tr>
				<td colspan="7">
					<input type="button" value="updateCart">
				</td>
				<td>&nbsp;</td>
			</tr>
		</table>
		<c:if test="${sessionScope.cart.numberOfItems > 0}">
			<a href="service?action=checkOut" class="Button">Proceed to Checkout</a>
		</c:if>
	</form>
</div>

<div id="Separator">&nbsp;</div>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>